<template>
    <van-popup
        v-model="isShow"
        position="bottom"
        :style="{ height: '366px' }"
        class="talk-info-container"
        @close="close"
        safe-area-inset-bottom
    >
        <div class="title-wrapper">
            <p class="title">通话详情</p>
            <span class="value">工单号：{{ ticket.orderId }}</span>
        </div>
        <p class="divider"></p>
        <TalkInfoItem
            v-for="(item, index) in ticket.talkTime"
            :key="item.sessionId"
            :session="item"
            :showDivider="index < ticket.talkTime.length - 1"
        />
    </van-popup>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";

Vue.use(Popup);
import TalkInfoItem from "./TalkInfoItem.vue";
export default {
    components: { TalkInfoItem },
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        ticket: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            isShow: false,
            // session: [
            //     {
            //         id: 1,
            //         startTime: "2022.03.03 15.43",
            //         duration: "13:43",
            //         agent: "客服 wyx",
            //     },
            //     {
            //         id: 2,
            //         startTime: "2022.03.03 15.43",
            //         duration: "13:43",
            //         agent: "客服 wyx",
            //     },
            //     {
            //         id: 3,
            //         startTime: "2022.03.03 15.43",
            //         duration: "13:43",
            //         agent: "客服 wyx",
            //     },
            //     {
            //         id: 4,
            //         startTime: "2022.03.03 15.43",
            //         duration: "13:43",
            //         agent: "客服 wyx",
            //     },
            //     {
            //         id: 5,
            //         startTime: "2022.03.03 15.43",
            //         duration: "13:43",
            //         agent: "客服 wyx",
            //     },
            //     {
            //         id: 6,
            //         startTime: "2022.03.03 15.43",
            //         duration: "13:43",
            //         agent: "客服 wyx",
            //     },
            // ],
        };
    },
    watch: {
        show(val) {
            this.isShow = val;
        },
    },
    created() {},
    mounted() {},
    methods: {
        close() {
            this.$emit("close");
        },
    },
};
</script>

<style lang="less" scoped>
.talk-info-container {
    width: 100%;
    height: 366px;
    background: #ffffff;
    border-radius: 16px 16px 0px 0px;
    border: 1px solid #979797;
    padding: 20px 16px;
    box-sizing: border-box;
    overflow-y: auto;

    p {
        margin: 0;
    }
    span {
        display: inline-block;
        vertical-align: middle;
    }

    .divider {
        width: 100%;
        height: 1px;
        background: #e7e7e7;
        margin-top: 15px;
    }
    .title-wrapper {
        .title {
            font-size: 16px;
            font-weight: bold;
            color: #242728;
            line-height: 22px;
        }
        .value {
            font-size: 13px;
            font-weight: 400;
            color: #656e71;
            line-height: 18px;
            margin-top: 4px;
        }
    }
}
</style>
<style lang="less"></style>
